<template>
  <div class="app">
    <header>
      <!-- 顶部内容 -->
      <h1>共有头部</h1>
    </header>

    <main>
      <!-- 中间可变区域 -->
        <router-view></router-view>
    </main>

    <footer>
      <!-- 底部内容 -->
      <div style="text-align: center;color: #ccc;margin-top: 10px;">
            <span>众信旅游</span>
            <span>众信历程</span>
            <span>众信品牌</span>
            <span>营业网点</span>
            <span>诚聘英才</span>
            <span>商务合作</span>
      </div>


      <div style="text-align: center;color: #ccc;margin: 10px;">
        <span>Copyright 2015-2018 Uzai.com</span>
        <span>许可证编号:L-TJ-CJ00059</span>
        <span>津ICP备18003064-1号</span>
        <span>悠哉呼叫中心来电显示号码为：10109898</span>
      </div>

    </footer>
  </div>
</template>

<script setup>

</script>

<style scoped>
span{
  margin-right: 20px;
  font-size: 12px;
}


.app {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: rgb(247, 247, 247);
}

header {
  color: #d9d3d3;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

footer {
  background-color: #484848;
  padding: 20px;
  border-radius: 8px;
}

main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>